<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true" class="nav-custom">
			<block slot="content">统计</block>
		</cu-custom>
		<view class="count-box-height" :style="{ height: appHeight + 'px' }">
			<view class="area-box-title">
				<SelectArea
					v-model="form.areaCode"
					@change="changeCode"
					@confirm="confAreaCode"
					style="width: 155rpx"
				></SelectArea>
				<view class="line"></view>
				<text style="color: #70757a">类型</text>
				<listSelect v-model="form.type" :list="typeList" @confirm="confAreaCode" style="width: 165rpx"></listSelect>
				<view class="line"></view>
				<listSelect
					class="overflowText"
					v-model="form.childType"
					:list="childList"
					@confirm="childTypeChange"
					style="width: 175rpx"
				></listSelect>
			</view>
			<view class="area-box-title">
				<view class="search-box pr15">
					<u-input v-model="form.seachValue"></u-input>
					<u-icon name="search" color="#79A2C8" @click="initPage"></u-icon>
				</view>
			</view>

			<view class="table-box mt20 flex-cc" style="width: 750rpx; overflow: hidden">
				<s-table-page
					:columns="formData.columns"
					:datas="formData.datas"
					@changeSort="changeSort"
					@customRow="customRow"
					:heightSv="appHeight - 190 + 'px'"
				>
					<template v-slot:choose="choose">
						<u-checkbox :value="choose.data.id == preItem_id" class="pl17"></u-checkbox>
						<!-- <view>{{ choose.data.nickName }}</view> -->
					</template>
					<template v-slot:status="item">
						{{ item.data.status == '0' ? '正常' : '停用' }}
						<!-- <view>{{ choose.data.nickName }}</view> -->
					</template>
				</s-table-page>
			</view>
		</view>
	</view>
</template>
<script>
	import controlApi from '@/api/monitor/control'
	import SelectArea from '@/components/common/select/SelectArea.vue'
	import listSelect from '@/components/common/select/listSelect.vue'
	export default {
		name: 'count-box-height',
		components: { SelectArea, listSelect },
		data() {
			return {
				appHeight: 0,
				form: {
					areaCode: '',
					type: 'yjwz',
					childType: 'all',
					seachValue: ''
				},
				typeList: [
					{
						label: '应急物资',
						value: 'yjwz',
						table: [
							{ key: 'institutionName', title: '机构名称' },
							{ key: 'productName', title: '商品名称' },
							{ key: 'warehouseName', title: '仓库名称' },
							{ key: 'physicalQuantity', title: '实物数量' }
						]
					},
					{
						label: '企业台账',
						value: 'qytz',
						table: [
							{ key: 'economyIndustryType', title: '类型', width: '170rpx' },
							{ key: 'produceCode', title: '生产经营单位名称' },
							{ key: 'creditCode', title: '统一社会信用代码', width: '290rpx' }
						]
					},
					{
						label: '避难场所',
						value: 'bns',
						table: [
							{ key: 'flagSpicialName', title: '类型', width: '170rpx' },
							{ key: 'townshipName', title: '区域', width: '170rpx' },
							{ key: 'addressDetails', title: '名称' }
						]
					},
					{
						label: '专家数据',
						value: 'zjsj',
						table: [
							{ key: 'name', title: '姓名', width: '140rpx' },
							{ key: 'title', title: '职称', width: '260rpx' },
							{ key: 'unit', title: '单位' }
						]
					}
				],
				childList: [],
				dataList: [
					{ isChecked: false, name: '应急物资', value: 'yjwz' },
					{ isChecked: false, name: '企业台账', value: 'qytz' },
					{ isChecked: false, name: '避难场所', value: 'bns' },
					{ isChecked: false, name: '安置点', value: 'azd' },
					{ isChecked: false, name: '危险区', value: 'wxq' },
					{ isChecked: false, name: '转移路线', value: 'zylx' },
					{ isChecked: false, name: '专家数据', value: 'zjsj' }
				],
				formData: {
					sortKey: '',
					columns: [],
					datas: []
				}
			}
		},
		onLoad(options) {},

		async mounted() {
			this.appHeight = await this.$getHeight('.nav-custom')
		},
		methods: {
			changeCode(value, item) {
				console.info(`value,item:`, value, item)
				this.areaLable = item.label
				this.$nextTick(() => {
					this.initData()
				})
			},
			confAreaCode() {
				this.$nextTick(() => {
					this.initData()
				})
			},

			childTypeChange() {
				this.$nextTick(() => {
					this.initPage()
				})
			},
			async initData(type) {
				this.form.childType = 'all'
				if (this.form.type == 'yjwz') {
					const { childList, tableData } = await this.init_yjwz()
					this.childList = childList
					this.tableData = tableData
				}
				if (this.form.type == 'qytz') {
					const { childList, tableData } = await this.init_qytz()
					this.childList = childList
					this.tableData = tableData
				}
				if (this.form.type == 'bns') {
					const { childList, tableData } = await this.init_bns()
					this.childList = childList
					this.tableData = tableData
				}
				if (this.form.type == 'zjsj') {
					const { childList, tableData } = await this.init_zjsj()
					this.childList = childList
					this.tableData = tableData
				}
				this.initPage()
			},
			initPage() {
				this.$nextTick(() => {
					let type = this.form.type
					let item = this.typeList.find((el) => el.value == type)
					this.formData.columns = item.table
					let tableData = this.tableData.filter((el) => {
						return this.form.childType == 'all' || this.form.childType == el.childType
					})
					console.info(`tableData:`, tableData)
					this.formData.datas = tableData.filter((el) => {
						let props = [
							'institutionName',
							'productName',
							'warehouseName',
							'produceCode',
							'townshipName',
							'addressDetails',
							'name',
							'title',
							'unit'
						]
						const has = props.some((sin) => {
							return el[sin] && el[sin].indexOf(this.form.seachValue) > -1
						})
						return this.form.seachValue == '' || has
					})
					console.info(`this.formData.datas:`, this.formData.datas)
				})
			},

			customRow(item) {
				if (!item.lat || !item.lot) {
					return
				}
				let lat = item.lat || item.latitude
				let lon = item.lot || item.longitude
				uni.$emit('flyMapBaseData', { lat, lon, zoom: 16.5 })
				uni.navigateBack({
					delta: 1
				})
			},
			async init_yjwz() {
				uni.showLoading({
					title: '正在加载'
				})
				let resp = await controlApi
					.goodsMaterials({
						projectId: '3bc0fb05339a46d7966a7abac9fc3516'
					})
					.catch((err) => {
						this.$hideLoading()
					})
				this.$hideLoading()
				const { data } = resp
				const list = data.data
				let childList = []
				let tableData = []
				list.forEach((el, index) => {
					childList.push({
						label: el.materialType,
						value: index,
						extra: index
					})
					el.materialDetails.forEach((sin) => {
						sin.childType = index
						tableData.push(sin)
					})
				})
				childList.unshift({
					label: '全部',
					value: 'all'
				})
				tableData = tableData.filter((el) => {
					return el.institutionName.includes(this.areaLable) || this.areaLable == '三明市'
				})
				return { childList, tableData }
			},
			async init_qytz() {
				uni.showLoading({
					title: '正在加载'
				})
				let params = {
					areaId: this.form.areaCode,
					type: this.form.areaCode == '350400000000' ? 'CITY' : 'COUNTY',
					projectId: '3bc0fb05339a46d7966a7abac9fc3516'
				}
				let resp = await controlApi.enterpriseLedger(params).catch((err) => {
					this.$hideLoading()
				})
				this.$hideLoading()
				const { data } = resp
				const list = data.data
				console.info(`list:`, list)
				let childList = []
				let tableData = list
				// .filter(el=>{

				// })
				// list.forEach((el, index) => {

				// 	el.materialDetails.forEach((sin) => {
				// 		sin.childType = index
				// 		tableData.push(list)
				// 	})
				// })
				childList.unshift({
					label: '全部',
					value: 'all'
				})
				return { childList, tableData }
			},

			async init_bns() {
				uni.showLoading({
					title: '正在加载'
				})
				let params = {
					areaId: this.form.areaCode,
					type: this.form.areaCode == '350400000000' ? 'CITY' : 'COUNTY',
					projectId: '3bc0fb05339a46d7966a7abac9fc3516'
				}
				let resp = await controlApi.takeRefuge(params).catch((err) => {
					this.$hideLoading()
				})
				this.$hideLoading()
				const { data } = resp
				const list = data
				let childList = []
				let tableData = []
				list.forEach((el, index) => {
					childList.push({
						label: el.placeType,
						value: index,
						extra: index
					})
					el.placeDetails.forEach((sin) => {
						sin.childType = index
						tableData.push(sin)
					})
				})
				childList.unshift({
					label: '全部',
					value: 'all'
				})
				return { childList, tableData }
			},
			async init_zjsj() {
				console.info(`1:`, 1)
				let params = {
					projectId: '3bc0fb05339a46d7966a7abac9fc3516', //  ---项目id
					topoId: 'WPEmerManagementExperts:5ff7eb0f-e6cc-4890-aeae-3e68539aa652' // --
				}
				let resp = await controlApi.zjsjJson(params)
				console.info(`resp:`, resp)
				const { data } = resp
				let list = data.data
				let childList = []
				let tableData = []
				let groupNameArr = []
				list.forEach((el) => {
					let index = groupNameArr.findIndex((child) => {
						return child == el.groupName
					})
					if (index > -1) {
						el.childType = index
					} else {
						groupNameArr.push(el.groupName)
						let indexNew = groupNameArr.findIndex((child) => {
							return child == el.groupName
						})
						el.childType = indexNew
					}

					tableData.push(el)
				})
				const uniqueArr = [...new Set(groupNameArr)]
				uniqueArr.forEach((el, index) => {
					childList.push({
						label: el,
						value: index,
						extra: index
					})
				})
				console.info(`childList:`, childList)
				console.info(`uniqueArr:`, uniqueArr)
				childList.unshift({
					label: '全部',
					value: 'all'
				})
				return { childList, tableData }
			}
		}
	}
</script>
<style lang="less" scoped>
	.area-box-title {
		width: 720rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		padding: 0 15rpx;
		background: #e4f2ff;
		margin-left: 15rpx;
		margin-top: 10rpx;
		.area-box {
			width: 165rpx;
			height: 60rpx;
			flex-shrink: 0;

			// background: #e4f2ff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 7rpx;
			padding-right: 10rpx;
		}
		.line {
			width: 2rpx;
			height: 39rpx;
			flex-shrink: 0;
			background: #607589;
			opacity: 0.2;
		}
		.search-box {
			width: 100%;
			height: 60rpx;
			flex-shrink: 0;
			border-radius: 4rpx;
			// border: 1rpx solid rgba(0, 133, 255, 0.7);
			background: #e4f2ff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 7rpx;
			padding-left: 10rpx;
		}
	}
	/deep/.table-view-height-sv {
		height: 100%;
		overflow: auto;
	}

	.count-box-height {
		width: 100%;
		position: relative;
		overflow: hidden;

		.left-menus {
			position: absolute;
			left: 30rpx;
			top: 150rpx;
			z-index: 999;
			background: #fff;
			.menus-sin {
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 144rpx;
				background: #fff;
			}
			.itemAc {
				background: #2695fe;
				color: #fff;
			}
		}
	}
	/deep/.circle-boxEnter {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.df-box {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			box-shadow: 0px 4rpx 30rpx 0px rgba(0, 0, 0, 0.08);
			backdrop-filter: blur(21.5rpx);
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
		}
		.ger-color {
			background: linear-gradient(180deg, #fff 0%, #d8fff8 100%);
			color: #52af9f;
			border: 1rpx solid #52af9f;
		}
		.blue-color {
			background: linear-gradient(180deg, #fff 0%, #ecf6ff 100%);
			color: #0085ff;
			border: 1rpx solid #0085ff;
		}
		.org-color {
			background: linear-gradient(180deg, #fff 0%, #fff6ec 100%);
			color: #ff8a00;
			border: 1rpx solid #ff8a00;
		}

		.red-color {
			background: #ff0000;
		}
		span {
			color: white;
			text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
			white-space: nowrap;
		}
	}
	/deep/.overflowText {
		.areaSelect-box {
			.nop {
				text-align: center;
				width: 100%;
				white-space: nowrap; /* 不换行 */
				overflow: hidden; /* 超出隐藏 */
				text-overflow: ellipsis; /* 显示省略号 */
			}
		}
	}
</style>
